<template>
  <div class="resource-section-container">
    <a-card class="resources-section">
      <div class="chapter-list">
        <template v-if="chapters.length < 5">
          <div
            v-for="chapter in chapters"
                :key="chapter.id"
          class="chapter-item"
          :class="{ 'active-chapter': chapter.id === activeChapter }"
                  >
          <a-button
                    type="text"
            @click="selectChapter(chapter)"
            class="chapter-button"
                  >
            {{ chapter.name }}
                  </a-button>
          <a-tooltip v-if="chapters.length > 1" title="删除章节">
            <CloseOutlined
              class="delete-icon"
              @click.stop="confirmDeleteChapter(chapter)"
            />
          </a-tooltip>
        </div>
</template>

        <template v-else>
          <div
            v-for="chapter in visibleChapters"
            :key="chapter.id"
            class="chapter-item"
            :class="{ 'active-chapter': chapter.id === activeChapter }"
          >
            <a-button
              type="text"
              @click="selectChapter(chapter)"
              class="chapter-button"
      >
              {{ chapter.name }}
            </a-button>
            <a-tooltip v-if="chapters.length > 1" title="删除章节">
              <CloseOutlined
                class="delete-icon"
                @click.stop="confirmDeleteChapter(chapter)"
            />
            </a-tooltip>
          </div>

          <a-dropdown placement="bottomRight">
            <a-button type="text" class="more-button">
              更多 <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item
                  v-for="chapter in remainingChapters"
                  :key="chapter.id"
                  @click="selectChapter(chapter)"
                >
                  <div class="menu-item">
                    <span>{{ chapter.name }}</span>
                    <a-button
                      type="text"
                      danger
                      size="small"
                      @click.stop="confirmDeleteChapter(chapter)"
                    >
                      删除
                    </a-button>
            </div>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
</template>

        <a-button
          type="primary"
          size="small"
          @click="$emit('show-add-chapter')"
          class="add-button"
        >
          <PlusOutlined /> 添加
        </a-button>
      </div>

      <a-modal
        v-model:visible="deleteModalVisible"
        title="确认删除"
        @ok="handleDeleteChapter"
        @cancel="deleteModalVisible = false"
      >
        <p>确定要删除章节 "{{ chapterToDelete?.name }}" 吗？</p>
      </a-modal>

      <a-row :gutter="[16, 16]" class="resource-grid">
        <a-col :span="8" v-for="resource in resources" :key="resource.id">
          <a-card hoverable>
            <template #cover>
              <div class="resource-icon">
                <component :is="getIconComponent(resource.type)" style="font-size: 40px;" />
              </div>
            </template>
            <a-card-meta
              :title="resource.title"
              :description="resource.description"
            />
            <template #actions>
              <a-tooltip title="编辑">
                <EditOutlined @click.stop="$emit('edit-resource', resource)" />
              </a-tooltip>
              <a-tooltip title="查看">
                <EyeOutlined @click.stop="$emit('select-resource', resource)" />
              </a-tooltip>
</template>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card hoverable @click="$emit('show-add-resource')">
            <div class="resource-icon">
              <PlusOutlined style="font-size: 40px;" />
            </div>
            <a-card-meta title="添加新资源" description="点击添加新的资源" />
          </a-card>
        </a-col>
      </a-row>

      <a-card class="update-log" :bordered="false">
        <template #title>
          <h3 class="update-title">
            <a-icon type="sync" spin style="margin-right: 8px; color: #1890ff"/>
            最近资源更新
          </h3>
        </template>
        <a-timeline>
          <a-timeline-item
            v-for="(update, index) in updates"
            :key="index"
            :color="index === 0 ? 'blue' : 'gray'"
          >
            <div class="update-item">
              <span class="update-time">{{ formatTime(update.created_at) }}</span>
              <p class="update-content">{{ formatUpdateMessage(update) }}</p>
            </div>
          </a-timeline-item>
        </a-timeline>
      </a-card>
    </a-card>
  </div>
</template>

<script>
import { DownOutlined, PlusOutlined, CloseOutlined, FileOutlined, FileTextOutlined, CalendarOutlined, VideoCameraOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';

export default {
  name: "ResourceSection",
  components: { DownOutlined, PlusOutlined, CloseOutlined, EditOutlined, EyeOutlined },
  props: {
    chapters: { type: Array, default: () => [] },
    activeChapter: { type: [String, Number], default: "" },
    resources: { type: Array, default: () => [] },
    updates: { type: Array, default: () => [] }
  },
  emits: [
    "show-add-chapter",
    "show-add-resource",
    "select-resource",
    "delete-chapter",
    "update:activeChapter",
    "delete-resource",
    "edit-resource"
  ],
  data() {
    return {
      deleteModalVisible: false,
      chapterToDelete: null
    };
  },
  computed: {
    visibleChapters() {
      return this.chapters.slice(0, 4);
    },
    remainingChapters() {
      return this.chapters.slice(4);
    }
    },
  methods: {
    formatTime(timeString) {
      const date = new Date(timeString);
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${month}-${day} ${hours}:${minutes}`;
    },
    formatUpdateMessage(update) {
      return update.message
    },
    selectChapter(chapter) {
      this.$emit('update:activeChapter', chapter.id);
    },
    confirmDeleteChapter(chapter) {
      if (this.chapters.length <= 1) {
        Modal.error({
          title: '无法删除',
          content: '至少需要保留一个章节'
        });
        return;
      }
      this.chapterToDelete = {
        id: chapter.id,
        name: chapter.name
      };
      this.deleteModalVisible = true;
    },
    handleDeleteChapter() {
      if (this.chapterToDelete && this.chapterToDelete.id) {
        this.$emit("delete-chapter", this.chapterToDelete.id);
      }
      this.deleteModalVisible = false;
      this.chapterToDelete = null;
    },
    getIconComponent(type) {
      const iconMap = {
        ppt: FileOutlined,
        transcript: FileTextOutlined,
        plan: CalendarOutlined,
        media: VideoCameraOutlined
      };
      return iconMap[type] || FileOutlined;
    }
  }
};
</script>

<style scoped>
.resource-section-container {
  width: 100%;
  overflow: hidden;
}

.resources-section {
  margin-top: 20px;
}

.chapter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.chapter-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding-right: 24px;
}

.active-chapter {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.chapter-button {
  padding: 0 12px;
  height: 32px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  background: transparent;
}

.active-chapter .chapter-button {
  color: #1890ff;
}

.delete-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  cursor: pointer;
  padding: 2px;
}

.delete-icon:hover {
  color: #ff7875;
}

.more-button, .add-button {
  height: 32px;
}

.add-button {
  margin-left: auto;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.resource-grid {
  margin-top: 16px;
}

.resource-icon {
  text-align: center;
  padding: 10px;
}

.update-log {
  margin-top: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.update-title {
  color: #1890ff;
  margin-bottom: 0;
}

.update-item {
  padding: 4px 0;
}

.update-time {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.update-content {
  margin: 0;
  color: #333;
}

:deep(.ant-card-actions) {
  background: #fff;
}

:deep(.ant-card-actions > li) {
  margin: 4px 0;
}
</style>



